<template>
  <div>
    <div class="card">按投资风格</div>
    <div class="card active_card">按策略类型</div>
  </div>
</template>

<script>
export default {
  name: 'timeline',
  props: {
    data: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {

    }
  },
  watch: {

  },
  methods: {

  },
  mounted () {

  },
  created () {

  }
}
</script>

<style lang="less" scoped>
.mark {
  display: inline-block;
  height: 0.67em;
  width: 0.67em;
  border: 2px solid #546BFF;
  border-radius: 50%;
  background: white;
}
.title {
  font-size: 1.17em;
  font-weight: bold;
  padding-left: 0.5em;
}
.timeline-item {
  display: flex;
  padding: 0.5em 1.7em;
  flex-direction: column;
  flex-wrap: wrap;
  .card {
    display: flex;
    margin: 0.2em 1em 0.2em 0;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    border: 1px solid #EDF1F5;
    border-radius: 10px;
    height: 1.9em;
    width: 6.5em;
    color: #7A7AAB;
  }
  .active_card {
    background: #4D66FF;
    border: 0px solid #EDF1F5;
    color: white;
    box-shadow: 0 1px 2px 0 rgba(102,102,102,0.50);
  }
}
</style>
